import { Space, Input, Row, Col, Select, DatePicker, message, Button } from 'antd';
import React from 'react';
import styles from './style.less';
import { connect } from 'dva';
import { routerRedux } from "dva/router";

const { Search } = Input;
const { Option } = Select;
const hotKey = ['新冠病毒', '高危人群筛查', '蝙蝠', '核酸检测']
@connect(({global})=>({userId: global.userId}))
class Source extends React.PureComponent {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  state = {
    classificationList2: [],
    classificationList3: [],
    classificationList4: [],
    classificationList5: [],
    hotWord: [],
    inputValue: "",
    form: {
      rangeValue: "",
      formatValue: "",
      startTime: "",
      endTime: "",
      subjectsValue: "",
    },
    rangeTimeValue: "",
    pageNum: 1,
    pageSize: 10
  }
  componentDidMount() {
    //获取学科分类
    this.props.dispatch({
      type: "global/queryCategory",
      payload: {
        pid: 2
      }
    }).then(res => {
      if (res) {

        this.setState({
          classificationList2: [{ dicName: "全部", dicCode: "" }, ...res.data,]
        });
      }
    })

    //获取数据来源
    this.props.dispatch({
      type: "global/queryCategory",
      payload: {
        pid: 3
      }
    }).then(res => {
      if (res) {
        this.setState({ classificationList3: res.data });

      }
    })

    //获取数据格式
    this.props.dispatch({
      type: "global/queryCategory",
      payload: {
        pid: 4
      }
    }).then(res => {
      if (res) {
        this.setState({ classificationList4: [{ dicName: "全部", dicCode: "" }, ...res.data,] });
      }
    })

    //获取使用范围
    this.props.dispatch({
      type: "global/queryCategory",
      payload: {
        pid: 5
      }
    }).then(res => {
      if (res) {
        this.setState({ classificationList5: [{ dicName: "全部", dicCode: "" }, ...res.data,] });
      }
    })

    //资源检索--热词
    this.props.dispatch({
      type: "global/queryHotWord",
      payload: {
      }
    }).then(res => {
      if (res) {
        this.setState({
          hotWord: res.data,
        })
      }
    })
    // this.advancedSearch();
    // this.advancedSearch1()
  }

  // advancedSearch1 = () => {
  //   let { pageSize, pageNum, title } = this.state;
  //   this.props.dispatch({
  //     type: "global/queryDataAsset",
  //     payload: {
  //       userId: "",
  //       text: title,
  //       startTime: "",
  //       endTime: "",
  //       subjects: "",
  //       sources: "",
  //       format: "",
  //       scope: "",
  //       pageNum: pageNum,
  //       pageSize: pageSize,
  //       sort: "",
  //     }
  //   }).then(res => {
  //     this.setState({})
  //   })
  // };

  //数据列表
  advancedSearch = () => {
    let { pageSize, pageNum, title } = this.state;
    this.props.dispatch({
      type: "global/queryDataAsset",
      payload: {
        userId: this.props.userId,
        text: title,
        startTime: "",
        endTime: "",
        subjects: "",
        sources: "",
        format: "",
        scope: "",
        pageNum: pageNum,
        pageSize: pageSize,
        sort: "",
      }
    }).then(res => {
      if (res && res.data.rows.length > 0) {
        this.setState({
          searchList: res.data.rows[0],
          total: res.data.total,
        })
      } else {
        message.error("检索结果为空！")
      }
    })
  };

  //输入框
  handleInSearch = (value) => {
    this.props.dispatch(routerRedux.push({
      pathname: `/DataAssets/`,
      searchValue: value,
      state: this.state.form
    }));
    this.setState({
      title: value,
    }, () => {
      this.advancedSearch()
    })
  }

  //清空按钮
  getClear = () => {
    this.setState({
      inputValue: "",
      form: {
        rangeValue: "",
        formatValue: "",
        subjectsValue: "",
        startTime: "",
        endTime: ""
      }, rangeTimeValue: new Date()//清空
    }, () => { this.advancedSearch() })
  }
  //学科下拉框
  handleInSearchxk = (value) => {
    this.setState({
      form: {
        ...this.state.form,
        subjectsValue: value,
      }
    })
  }
  //数据格式下拉框
  handleInSearchgs = (value) => {
    this.setState({
      form: {
        ...this.state.form,
        formatValue: value
      }
    })
  }

  //使用范围下拉框
  handleInSearchfw = (value) => {
    this.setState({
      form: {
        ...this.state.form,
        rangeValue: value
      }
    })
  }

  //起始日期下拉框
  releaseTimeChange = (_, dateStrings) => {
    this.setState({
      form: {
        ...this.state.form,
        startTime: dateStrings,
      }
    })
  }


  //起始日期下拉框
  endTimeChange = (_, dateStrings) => {
    this.setState({
      form: {
        ...this.state.form,
        endTime: dateStrings,
      }
    })
  }
  render() {
    let { form, inputValue, rangeTimeValue } = this.state
    return (
      <div className={styles.content}>
        <div className={styles.bannerBox}>
          <div className={styles.bannerTitle}>
            <p>科研数据检索</p>
            <p>Resource retrieval</p>
          </div>
          <div className={styles.searchInBanner}>
            <div className={styles.hotKeyWordsBox}>
              <Space align='center'>
                热门检索词汇:
                {
                  this.state.hotWord.map((item, index) => {
                    return (
                      <span key={index} onClick={() => this.handleInSearch(item)} className={styles.kewWords}>{item}</span>
                    )
                  })
                }
              </Space>
            </div>
            <div className={styles.searchBox}>
              <Search
                placeholder='请输入关键字'
                onChange={(e) => this.setState({ inputValue: e.target.value })}
                onSearch={(value) => this.handleInSearch(value)}
                value={inputValue} />
              <Button onClick={this.getClear}>清空</Button>
            </div>
            <Row gutter={20}>
              <Col span={5}>
                <Select defaultValue="" value={form.subjectsValue} onChange={(value) => this.handleInSearchxk(value)}>
                  {
                    this.state.classificationList2.map((item, index) => {
                      return (
                        <Option key={index} value={item.dicCode}>{item.dicName}</Option>
                      )
                    })
                  }
                </Select>
              </Col>
              {/* <Col span={4}>
                <Select placeholder='数据来源' onChange={(value) => this.handleInSearchxk(value)}>
                  {
                    this.state.classificationList3.map((item, index) => {
                      return (
                        <Option key={index} value={item.dicCode}>{item.dicName}</Option>
                      )
                    })
                  }
                </Select>
              </Col> */}
              <Col span={5}>
                <Select defaultValue="" value={form.formatValue} onChange={(value) => this.handleInSearchgs(value)}>
                  {
                    this.state.classificationList4.map((item, index) => {
                      return (
                        <Option value={item.dicCode} key={index}>{item.dicName}</Option>
                      )
                    })
                  }

                </Select>
              </Col>
              <Col span={5}>
                <Select defaultValue="" value={form.rangeValue} onChange={(value) => this.handleInSearchfw(value)}>
                  {
                    this.state.classificationList5.map((item, index) => {
                      return (
                        <Option value={item.dicCode} key={index}>{item.dicName}</Option>
                      )
                    })
                  }

                </Select>
              </Col>
              <Col span={4}>

                <DatePicker placeholder='起始时间'
                  key={rangeTimeValue}
                  format="YYYY-MM-DD HH:mm:ss"
                  onChange={this.releaseTimeChange} />
              </Col>
              <Col span={4}>
                <DatePicker placeholder='截止时间' key={rangeTimeValue}
                  format="YYYY-MM-DD HH:mm:ss"
                  onChange={this.endTimeChange} />
              </Col>
            </Row>
          </div>
        </div>
      </div>
    );
  }
}

export default Source;